<template>
  <!-- <div class="cockpit" :style="{backgroundImage: `url(${require('@/assets/Image/cockpit-bg.png')})`}"> -->
  <div>
    <div class="dark-list">
      <div class="add-report" @click="showReport = true"><a-icon type="plus"></a-icon> 添 加</div>
      <div class="dark-list-scroll">
        <a-row>
          <a-col :span="12" v-for="item in list" :key="item.id">
            <div class="each-dark" @click="getDesDetail(item)">
              <div class="dark-list--title">
                <h1 class="ellipsis">报告方：{{ item.reportParty }}</h1>
                <p>
                  {{ item.reportTime }}
                </p>
              </div>
              <p class="ellipsis-2">
                报告附件：
                <span v-for="(items, i) in fileFormat(item.enclosure)" :key="i">
                  <a-tooltip :title="items.url">
                    <a style="font-size: 30px" :href="items.url" target="_blank">
                      <SvgIcon v-if="items.type == 'pdf'" iconClass="pdf" />
                      <SvgIcon v-else-if="items.type.includes('doc')" iconClass="word" />
                      <SvgIcon v-else-if="['png', 'jpg', 'jpeg', 'gif'].includes(items.type)" iconClass="image" />
                      <SvgIcon v-else iconClass="file" />
                    </a>
                  </a-tooltip>
                </span>
              </p>
            </div>
          </a-col>
        </a-row>

      </div>
    </div>
    <p class="dark-back" @click="goback">返 回</p>

    <createSafe v-model="showReport" :eventId="id" @submit="submit" />
  </div>
</template>
<script>
import moment from 'moment';
import { queryMbThirdReport } from '@/api/serve';
import createSafe from './modules/createSafe';
import SvgIcon from '@/components/SvgIcon.vue';

export default {
  components: { createSafe, SvgIcon },
  inject: ['updateTitle', 'getNumberdetails', 'goback', 'getDesDetail'],
  data() {
    return {
      moment,
      show: false,
      showReport: false,
      reload: false,
      active: 0,
      list: [],
      id: '',
      queryParams: {
        pageSize: 10,
        pageNo: 1
      },
      total: 0,
      loading: false,
      finished: false
    };
  },
  beforeDestroy() {

  },
  created() {
    this.id = this.$route.query.id;
    this.queryParams.id = this.id;
    this.getList();
    this.updateTitle('第三方报告');
  },
  computed: {
    fileFormat() {
      return function(file) {
        if (!file) return [];
        const list = file.split(',');
        return list.map(e => {
          const index = e.lastIndexOf('.');
          return {
            type: e.substring(index + 1, e.length).toLowerCase(),
            url: e
          };
        });
      };
    }
  },
  mounted() {
    this.$nextTick(() => {
       if (document.querySelector('.dark-list-scroll')) {
          const selectWrap = document.querySelector('.dark-list-scroll');
          selectWrap.addEventListener('scroll', this.scrollLoadMore);
       }
    });
  },
  methods: {
    getList() {
      this.loading = true;
      queryMbThirdReport(this.queryParams).then(res => {
        this.list = this.list.concat(res.data || []);
        this.total = res.data.total;
        this.loading = false;
        if (this.list.length >= this.total) {
          this.finished = true;
        }
        // this.listPage.total = res.data.total;
      });
    },
    scrollLoadMore() {
      if (this.loading || this.finished) return;
      const scrollWrap = document.querySelector('.dark-list-scroll');
      var currentScrollTop = scrollWrap.scrollTop;
      var currentOffsetHeight = scrollWrap.scrollHeight;
      var currentClientHeight = scrollWrap.clientHeight;
      if ((currentScrollTop + currentClientHeight >= currentOffsetHeight - 80)) {
          // 到底部了 重新请求数据
          this.queryParams.pageNo++; // 页码++
          this.getList();
       }
    },
    submit() {
      this.list = [];
      this.queryParams.pageNo = 1;
      this.finished = false;
      this.getList();
    }
  }
};
</script>
<style lang="less" scoped>
  .cockpit {
    background-size: 100% 100%;
    background-position: top center;
    height: 1080px;
    position: relative;
    overflow: hidden;
    background-color: rgb(4,11,36);

    .hot-each {
      display: flex;
      align-items: center;
      margin-bottom: 6px;
      position: relative;
      &:nth-child(5) {
        margin-top: 8px;
      }

      // &::before {
      //   content: ' ';
      //   position: absolute;
      //   width: 14px;
      //   height: 14px;
      //   border: 1px solid #5CA1F2;
      //   border-radius: 100%;
      //   left: 30px;
      // }
      // &::after {
      //   content: ' ';
      //   position: absolute;
      //   width: 1px;
      //   height: 43px;
      //   background: #395a81;
      //   left: 37px;
      //   top: 29px;
      // }
      // &:last-child {
      //   &::after {
      //     display: none;
      //   }
      // }

      .h-list--order-text {
        color: #fff;
        font-size: 15px;
        width: 20px;
        height: 20px;
        border-radius: 100%;
        background: #36414F;
        line-height: 20px;
        text-align: center;
        // font-weight: bold;
      }
      .h-list--order-1 {
        .h-list--order-text {
          background: #E19F29;
        }

      }
      .h-list--order-2 {
        .h-list--order-text {
          background: #85939F;
        }
      }
      .h-list--order-3 {
        .h-list--order-text {
          background: #B46949;
        }
      }
      .h-list--order-4 {
        .h-list--order-text {
          background: #36414F;
        }
      }
      .title {
        // height: 23px;
      }
      .h-list--order {
        height: 20px;
      }

      .hot-each--content {
        margin-left: 38px;
        width: 84%;
        h1 {
          width: 100%;
          font-size: 12px;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 24px;
          margin: 0;
          cursor: pointer;
          transition: all 0.3s;
          &:hover {
            color: #48AAFB;
          }
        }
        p {
          font-size: 12px;
          font-weight: 400;
          color: #CBCBCB;
          line-height: 24px;
          margin: 0;
        }
      }
    }

  }

</style>
<style lang="less">
  .dark-list {
    position: relative;
    background: url('~@/assets/Image/dark-list.png');
    background-size: 100% 100%;
    width: 1570px;
    height: 700px;
    margin: 0 auto;
    padding: 60px 128px;
    padding-right: 20px;
    box-sizing: border-box;

    .dark-list-scroll {
      height: 580px;
      overflow-y: auto;
      padding-right: 20px;
      &::-webkit-scrollbar {
        width: 13px;
        // height: 224px;
      }
      &::-webkit-scrollbar-thumb {
        background: #154DA2;
        border-radius: 7px;
      }
      &::-webkit-scrollbar-track {
        border-radius: 7px;
        background: transparent;
      }
    }
    .dark-list--title {
      color: #27CEF8;
      font-weight: 400;
      // font-style: italic;
      line-height: 1.5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      h1 {
        font-size: 20px;
        color: #27CEF8;
        max-width: 70%;
        margin: 0;
      }
      p {
        font-size: 16px;
        line-height: 20px;
        margin: 0;
        // >span:first-child {
        //   margin-right: 36px;
        // }
      }
    }
    .each-dark {
      margin-bottom: 20px;
      transition: all 0.3s;
      box-sizing: border-box;
      padding: 20px 30px;
      border: 2px solid transparent;
      height: 130px;
      cursor: pointer;
      >p {
        font-size: 15px;
        // font-family: Source Han Sans CN;
        font-weight: 400;
        // font-style: italic;
        color: #FFFFFF;
        line-height: 1.5;
        margin: 0;
        margin-top: 12px;
      }
      &:hover {
        background: #20314B;
        border: 2px solid #83AFE7;
      }
    }
    .add-report {
      position: absolute;
      right: 40px;
      top: 30px;
      color: #48AAFB;
      font-size: 20px;
      cursor: pointer;
    }
  }

</style>
